<template>
  <view
    v-if="show"
    class="pop-up"
    :class="contentPosition"
    :style="{ backgroundColor: `rgba(0, 0, 0, ${bgcolorAlpha})` }"
    @tap.passive="bgClick"
  >
    <view @click.stop class="pop-up-container">
      <slot />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

const props = defineProps({
  // 显示内容的位置 top 居上 center 居中 bottom 居下
  contentPosition: {
    type: String,
    default: "top"
  },

  //弹框背景的透明度
  bgcolorAlpha: {
    type: Number,
    default: 0.6
  },
  // 是否点击背景关闭弹框
  closeOnClickOverlay: {
    type: Boolean,
    default: true
  },
  isShow: {
    type: Boolean,
    default: false
  }
});
const show = ref(false);
const emit = defineEmits(["update:isShow"]);
const open = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
  emit("update:isShow", show.value);
};
const bgClick = () => {
  console.log("---dianji", props.closeOnClickOverlay);
  if (props.closeOnClickOverlay) {
    close();
  }
};
defineExpose({ open, close });

watch(
  () => props.isShow,
  () => {
    show.value = props.isShow;
  },
  {
    immediate: true
  }
);
</script>

<style>
.pop-up {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 100%;
  display: flex;
  justify-content: center;
}

.pop-up-container {
  background-color: white;
}

.center {
  align-items: center;
}

.top {
  align-items: flex-start;
}

.bottom {
  align-items: flex-end;
}
</style>
